<template>
	<div id="container"></div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted } from 'vue';

const props = defineProps({
	center: {
		type: Array,
		default: () => [116.397428, 39.90923],
	},
});
let map = null;

onMounted(() => {
	window._AMapSecurityConfig = {
		securityJsCode: 'ea65a1c3209d112630f98a40c1ce729c',
	};
	AMapLoader.load({
		key: '927f5f8efcb1d7cb3a9e5e302f199fc3', // 申请好的Web端开发者Key，首次调用 load 时必填
		version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
	}).then((AMap) => {
		map = new AMap.Map('container', {
			// 设置地图容器id
			zoom: 11, // 初始化地图级别
			center: props.center, // 初始化地图中心点位置
		});
    //创建一个 Marker 实例：
    const marker = new AMap.Marker({
      position: new AMap.LngLat(props.center[0], props.center[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: "当前位置",
    });
    marker.setLabel({
      direction:'bottom',
      offset: new AMap.Pixel(0, 5),  //设置文本标注偏移量
      content: "<div class='info'>当前设备位置</div>", //设置文本标注内容
    });
    //将创建的点标记添加到已有的地图实例：
    map.add(marker);
	});
});

onUnmounted(() => {
	map?.destroy();
});
</script>

<style scoped lang="scss">
#container {
	width: 100%;
	height: 600px;
}
</style>
